<template>
  <div class="map-container">
    <div ref="chart" class="map"></div>
    <slot></slot>
  </div>
</template>
<script>
import Bus from "@/bus.js";
import { sydata } from "@/api/index.js";
import ResizeChart from "@/components/mixin/ResizeChart";
export default {
  data () {
    return {
      selectValue: "",
      myChart: null,
      jsonvalue: [],
      backshow: false,
      option: {
        tooltip: {
          trigger: "item",
          showDelay: 0,
          transitionDuration: 0.2,
        },
        visualMap: {
          left: "right",
          min: 0,
          max: 3000,
          inRange: {
            color: ["#f2f2f2", "#8DEEEE", "#7EC0EE", "#00B2EE", "#00BFFF", "#4778c7", "#36648B"],
          },
          text: ["High", "Low"], // 文本，默认为数值文本
          calculable: true,
        },
        series: [
          {
            name: "",
            type: "map",
            roam: false,
            aspectScale: 0.9,
            mapType: "湖南省", // 自定义扩展图表类型
            emphasis: {
              itemStyle: {
                areaColor: "#87CEFF",
              },
            },

            label: {
              show: true,
              formatter: function (params) { },
            },
            data: [

            ],
            // 自定义名称映射
            nameMap: {},
          },
        ],
      },
      mapList: [
        "湖南省",
        "长沙市",
        "株洲市",
        "湘潭市",
        "常德市",
        "衡阳市",
        "怀化市",
        "娄底市",
        "邵阳市",
        "永州市",
        "岳阳市",
        "益阳市",
        "张家界市",
        "郴州市",
        "湘西土家族苗族自治州",
      ],
    };
  },
  mounted () {
  },
  mixins: [ResizeChart],
  props: {
    formatter: {
      type: Function,
      default: function (params) {
        if (!params.value) {
          params.value = 0
        }
        return params.name + "共有" + params.value + "个村庄";
      }
    }
  },
  methods: {
    initEchartMap () {
      this.myChart = this.$echarts.init(this.$refs.chart);
      window.addEventListener("resize", this.myChart.resize);
      this.myChart.showLoading();

      this.mapList.map((v) => {
        let mapJson = require(`@/assets/json/${v}.json`);
        this.$echarts.registerMap(v, mapJson);
        if (v == "湖南省") {
          return;
        }
        mapJson.features.map((json) => {
          let m = {
            type: "FeatureCollection",
            features: [json],
          };
          this.$echarts.registerMap(json.properties.name, m);
        });
      });
      this.myChart.on("click", (city) => {
        this.option.series[0].mapType = city.name;
        this.myChart.setOption(this.option);
        this.$emit("changeCity", city.name);
      });
      this.myChart.setOption(this.option);
      this.myChart.hideLoading();
    },
    changeMap (cityName, v) {
      this.option.series[0].mapType = cityName;
      if (v) {
        this.option.series[0].data = v;
      }
      this.myChart.setOption(this.option);
      this.myChart.hideLoading();
    },
    changeData (data) {
      this.option.series[0].data = data;
      this.myChart.setOption(this.option);
    }
  },
};
</script>
<style lang="scss" scoped>
.map-container {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  position: relative;
}
.map {
  margin: 10px;
  width: 100%;
  height: 100%;
  // border-radius: 5px;
  position: relative;
}
</style>
